<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<div id="vue" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <div>地址:{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>
    <div>链接：<a v-bind:href="info.url" target="_blank" >博客地址</a>  </div>
    <a v-bind:href="info.url"> 惦记我</a>

</div>

<!--引入 vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        // data:{//data 属性 vm
        //   info:{
        //
        //   }
        //
        // },
        data() {
            return {
                info: {
                    name: null,
                    url: null,
                    page: 1,
                    isNonProfit: true,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    links: [
                        {
                            name: null,
                            url: null
                        }
                    ]
                },
            }
        },
        mounted() {//钩子函数  链式编程 ES6 新特性
            // axios.get('../datavue.json').then(response=>(console.log(response.data)));
            axios.get('../datavue.json').then(response => (this.info = response.data));

        }
    })
</script>

</body>
</html>
